<template>
  <div class="chart_container" v-if="currentList && currentList.length">
    <template v-for="code in currentList" :key="code">
      <template v-for="item in dataType" :key="item">
        <div :class="['box', item, code.replaceAll('.', '')]"></div>
        <div :class="['box', item, code.replaceAll('.', '')]"></div>
        <div :class="['box', item, code.replaceAll('.', '')]"></div>
      </template>
    </template>
  </div>

  <div class="chart_container empty" v-else>
    <Empty :image="simpleImage"></Empty>
  </div>
</template>

<script setup lang="tsx">
import { computed, inject, nextTick, ref, watch } from 'vue';
import { Empty, message } from 'ant-design-vue';
import * as echarts from 'echarts';
import 'echarts/theme/macarons';

const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
// const rowInfo: any = inject('rowInfo');
const props = defineProps({
  dataType: {
    type: Array,
    default: [],
  },
  data: {
    type: Object,
    default: () => {},
  },
  deviceInfo: {
    type: Array,
    default: [],
  },
});
watch(
  () => props,
  (val) => {
    console.log('触发');

    nextTick(() => {
      if (!Object.keys(val.data).length) return;
      dataInfo.value = val.data;
      getInfo(val.dataType, val.deviceInfo);
    });
  },
  { deep: true },
);

const dataInfo = ref(props.data);
const currentList = computed(() => {
  const asyncKeys = Object.keys(dataInfo.value);

  return devices.value.filter((i) => asyncKeys.includes(i.replaceAll('.', '')));
});

const devices = ref([]);
const getInfo = (list, deviceList) => {
  devices.value = deviceList;
  for (const i in dataInfo.value) {
    const keys = deviceList.map((i) => i.replaceAll('.', ''));
    if (!keys.includes(i)) return;
    list.forEach((item) => {
      nextTick(() => {
        const nodes = document.querySelectorAll(
          `.${item}.${i.replaceAll('.', '')}`,
        );
        nodes.forEach((node) =>
          init(
            node,
            dataInfo.value[i][conversion(item)][item],
            dataInfo.value[i][conversion(item)].xData,
            conversion(item),
            i,
          ),
        );
      });
    });
  }
};
const init = (dom, series, xData, type, code) => {
  const chart = echarts.init(dom);
  const option = {
    title: {
      text: '▍ 设备标识：' + code + formatType(type),
      textStyle: {
        color: '#fff',
        fontSize: 14,
      },
      top: 10,
      left: '3.8%',
    },
    grid: {
      left: '20',
      right: '28',
      top: '60',
      bottom: '60',
      containLabel: true,
      show: true,
    },
    xAxis: {
      show: true,
      type: 'category',
      splitLine: {
        show: false,
        lineStyle: {
          type: 'dashed',
        },
      },
      axisLine: {
        show: false,
        onZero: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: true,
        fontSize: '12px',
        color: '#fff',
        showMaxLabel: true,
      },
      data: xData,
    },
    yAxis: [
      {
        type: 'log',
        splitLine: {
          show: false,
          lineStyle: {
            type: 'dashed',
          },
        },
        axisLine: {
          show: false,
          onZero: false,
        },
        axisLabel: {
          color: '#fff',
          fontSize: '12px',
          formatter: function (params) {
            return Math.log10(params);
          },
        },
        axisTick: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: 'EIZ',
        type: 'line',
        symbol: 'none',
        showSymbol: false,
        lineStyle: {
          normal: {
            width: 1,
            color: 'red',
          },
          emphasis: { width: 1 },
        },
        data: series[0],
      },
      {
        name: 'EIN',
        type: 'line',
        symbol: 'none',
        showSymbol: false,
        lineStyle: {
          normal: {
            width: 1,
            color: '#5470c6',
          },
          emphasis: { width: 1 },
        },
        data: series[1],
      },
      {
        name: 'EIE',
        type: 'line',
        symbol: 'none',
        showSymbol: false,
        lineStyle: {
          normal: {
            width: 1,
            color: '#000',
          },
          emphasis: { width: 1 },
        },
        data: series[2],
      },
      {
        name: 'EAS',
        type: 'line',
        symbol: 'none',
        showSymbol: false,
        lineStyle: {
          normal: {
            width: 1,
            color: 'FFA200',
          },
          emphasis: { width: 1 },
        },
        data: series[3],
      },
      {
        name: 'EDF',
        type: 'line',
        symbol: 'none',
        showSymbol: false,
        lineStyle: {
          normal: {
            width: 1,
            color: '#FF6262',
          },
          emphasis: { width: 1 },
        },
        data: series[4],
      },
    ],
  };
  chart.setOption(option);
  addEventListener('resize', function () {
    chart.resize();
  });
};

const conversion = (num) => {
  switch (num) {
    case 'accelerationData':
      return 'a';
    case 'speedData':
      return 'b';
    case 'displacementData':
      return 'c';
  }
};

const formatType = (val) => {
  switch (val) {
    case 'a':
      return '加速度';
    case 'b':
      return '仿真速度';
    case 'c':
      return '仿真位移';
  }
};
</script>

<style lang="scss" scoped>
.chart_container {
  width: 100%;
  // min-height: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  // grid-template-rows: repeat(3, 1fr);
  gap: 1vh;
  margin-bottom: 1vh;
  .box {
    height: 30vh;
  }
  &.empty {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
